<template>
	<div class="system-add-api-container">
		<el-dialog :title="'新增分组'" :model-value="props.modelValue" width="769px" :before-close="handleClose">
			<el-form :model="ruleForm" size="default" label-width="80px">
				<el-row :gutter="35">
					<el-col class="mb20">
						<el-form-item label="分组名称">
							<el-input v-model="ruleForm.name" placeholder="分组名称" clearable></el-input>
						</el-form-item>
					</el-col>
					<el-col class="mb20">
						<el-form-item label="分组描述">
							<el-input v-model="ruleForm.content" placeholder="分组描述" clearable type="textarea"></el-input>
						</el-form-item>
					</el-col>
					<el-col>
						<el-form-item label="排序">
							<el-input-number v-model="ruleForm.sort" controls-position="right" placeholder="请输入排序" />
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="handleClose" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="systemAddApiGroup">
import { editApiGroup } from '@/api/system/api';
import { ElMessage } from 'element-plus';
const emits = defineEmits(['update:modelValue', 'refresh']);
const props = defineProps({
	modelValue: {
		type: Boolean,
	},
	getData: {
		type: Object,
		default: () => {},
	},
});

// console.log(props.getData);

const ruleForm = reactive({
	name: props.getData.name,
	content: props.getData.content,
	sort: props.getData.sort,
	id: props.getData.id,
});

// 新增
const onSubmit = async () => {
	let res = await editApiGroup(ruleForm);
	if (res.code === 0) {
		ElMessage.success(res.message);
		emits('refresh');
		handleClose(); // 关闭弹窗
	} else {
		ElMessage.error(res.message);
	}
};

// 关闭弹窗
const handleClose = () => {
	emits('update:modelValue', false);
};
</script>
